$(window).load(function(){
    waterfall();
    var dataInt={"data":[{'src':'10.jpg'},{'src':'9.jpg'},{'src':'8.jpg'},{'src':'8.jpg'},{'src':'8.jpg'},{'src':'8.jpg'},{'src':'8.jpg'}]};//真正的数据应是从后台获取，这里手动模拟
    $(window).scroll(function(){
        if(checkScrollSide){
            $.each(dataInt.data,function(key,value){//遍历json
                var oBox=$('<div>').addClass("box").appendTo($('#main'));//$('<div>')就表示创建一个<div></div>
                var oPic=$('<div>').addClass("pic").appendTo($(oBox));
                //此时value获取的是object对象（js原生对象），依旧不能直接用jq方法，此时value为{src:"0.jpg"}、{src:"1.jpg"}...
                $('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(oPic));//$(value).attr('src')即获取value中属性为src的值
            })
            waterfall();
        }
    })
})
function waterfall(){
    var $boxs=$('#main>div');//获取id为main下的所有div
    var w=$boxs.eq(0).outerWidth();//获取box的宽（outerWidth包括padding，border）
    var cols=Math.floor($(window).width()/w);//求列数
    $('#main').width(w*cols);//设main的宽

    var hArr=[];
    $boxs.each(function(index,value){//$.each相当于for，遍历元素，index为遍历元素的索引，value遍历的元素得的docm对象
        var h=$boxs.eq(index).outerHeight();//获取当前高度
        if(index<cols){//如果值小于列数
            hArr[index]=h;//并加到hArr数组中
        }else{
            var minH=Math.min.apply(null,hArr);//获取最小高度
            var minHIndex=$.inArray(minH,hArr);//$.inArray()方法：第一个参数为判断谁，第二个参数为在那个数组判断，得到最小高度的索引
            $(value).css({//value遍历的元素得的docm对象,docm对象不能使用jq方法，只有jq对象才能使用jq方法。$(value)可将docm对象转变为jq对象
                'position':'absolute',
                'top':minH+'px',
                'left':minHIndex*w+'px'
            });
            hArr[minHIndex]+=$boxs.eq(index).outerHeight();
        }
    })
}
function checkScrollSide(){
    var $lastBox=$("#main>div").last();
    //获取最后一个box距顶端的距离（包括卷起的高度）+该box的一半高度
    var lastBoxH=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
    //滚动条滚动的距离+可视区的高度
    var scrollTop=$(window).scrollTop()+$(window).height();
    return (lastBoxH<scrollTop)?true:false;
}